<template>
  <div style="width: 100%; height: 100%;">
    <div class="treeHeader">
      <Tabs v-model="tabsVal">
        <TabPane :label="$t('m.zhùcèwèishēnqǐng')" name="name1">
          <TabOne :tabsVal="tabsVal" />
        </TabPane>
        <TabPane :label="$t('m.jiéqīngwèifùjiè')" name="name2">
          <TabTwo :tabsVal="tabsVal" />
        </TabPane>
        <TabPane :label="$t('m.fàngkuǎnwèitíxiàn')" name="name3" v-if="countryName=='PHH'">
          <TabThree :tabsVal="tabsVal" />
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import TabOne from './tabOne';
import TabTwo from './tabTwo';
import TabThree from './tabThree';

export default {
  components: {
    TabOne,
    TabTwo,
    TabThree
  },
  data() {
    return {
      tabsVal: '',
      countryName:'',
    }
  },
  mounted() {
    this.countryName = localStorage.getItem("x-countryName")
    this.tabsVal = 'name1';
  },
};
</script>

<style lang="scss" scoped>
.treeHeader {
  margin: 0 15px;
  padding-top: 20px;
}
</style>
